<template>
  <div>Play</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { info } from '@/utils'

defineOptions({
  name: 'PlayPage',
})

const o = { name: 'peter' }

const eo = ref(o)

const ao = reactive(o)

const eeo = ref(eo)
const eeeo = ref(eeo)
const eao = ref(ao)

const aao = reactive(ao)
const aaao = reactive(aao)
const aeo = reactive(eo)

onMounted(() => {
  info('ao', ao)
  info('eo', eo)
  info('eo.value === ao', eo.value === ao)
  info('eeo === eo', eeo === eo)
  info('aao === ao', aao === ao)
  info('eeeo === eo', eeeo === eo)
  info('aaao === ao', aaao === ao)
  info('aeo === ao', aeo === ao)
  info('aeo', aeo)
  info('aeo.value', aeo.value)
  info('eao === eo', eao === eo)
  info('eao', eao)
  info('eao.value', eao.value)
  info('aeo.value === eao.value', aeo.value === eao.value)
})
</script>
